{extend name="./tpl/default/mobile/public/layout.html" /}
{block name="header"}
<link rel="stylesheet" href="/public/home/mobile/css/guanjian/anli.css">
<link rel="stylesheet" href="/public/home/mobile/css/guanjian/gonglv.css">

<style>
    .layui-layer-btn a {
        font-size: 1
    }
</style>
{/block}
{block name="head"}
<div class="am-g" style=" overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin-top: 10px;">
    <div class="am-u-sm-10">
        <a href="" onclick="history.back(-1)"> <span class="icon iconfont icon-xiangzuojiantou"></span></a>
    </div>
    <div class="am-u-sm-2">
        <span class="icon iconfont icon-sousuo"></span>
        <span class="icon iconfont icon-gouwuche"></span>
    </div>
</div>
{/block}
{block name="body"}
<div class="gonglv_box">
    <form action="" id="orderForm">
        <input type="hidden" name="sku_ids" value="{$skuIds}"/>
        <input type="hidden" name="goods_amount" value="{$cartList.total_price}"/>
        <input type="hidden" name="order_type" id="orderType" value="0">
        <input type="hidden" name="site_id" value="0">
        <div class="am-g" style=" overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin-top: 10px;">
            <div class="am-u-sm-4">
                订单确认：
            </div>
        </div>
        <button type="button"  onclick="addAddress();" class="am-btn am-btn-default">新增收货地址</button>
        <div id="ajaxAddressList"></div>
        <div class="am-g" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin-top: 10px;">
            <div class="am-u-sm-4">
                物流配送：
            </div>
        </div>
        <div class="am-g" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin-top: 10px;">
            {volist name="delivery" id="vo"}
            <span style="display: inline-block;border:1px solid #d1d1d1;width: 100px;">
                <input type="radio" name="delivery_id" onclick="getFreight();" value="{$vo.delivery_id}" {eq name="i"
                       value="1" }checked{/eq} />
                {$vo.delivery_name}
            </span>
            {/volist}
        </div>
        <div class="am-g" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin-top: 10px;">
            <div class="am-u-sm-4">
                商品列表：
            </div>
        </div>
        <div class="am-g" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin-top: 10px;">
            {volist name="cartList.item_list" id="vo"}
            <br/>
            <div class="am-u-sm-4">
                <img src="{$vo.goods_thumb}" alt="" style="width: 80%;"/>
            </div>
            <div class="am-u-sm-8">
                <div class="am-g">
                    <div class="am-u-12">
                        <p>{$vo.fulltitle}</p>
                    </div>
                    <div class="am-u-12">
                        <p></p>¥{$vo.simple_price}&nbsp;&nbsp;&nbsp;&nbsp;x{$vo.num}
                    </div>

                </div>
            </div>
            <hr style="border:1px solid #e0e0e0;">
            {/volist}
            <input type="hidden" name="inv_id" value="0" />
            <div class="am-g" style=" overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin-top: 10px;">
                <div class="am-u-sm-4">
                    优惠卷：
                </div>
            </div>

            <div class="am-g" style=" overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin-top: 10px;">
                <div class="am-sm-9">
                    <div class="am-form-group">
                        <label for="doc-select-1"></label>
                        <select id="doc-select-1" name="card_key">
                            <option value="0">不使用优惠券</option>
                            {volist name="couponList" id="vo"}
                            <option value="{$vo.card_key}">{$vo.title}</option>
                            {/volist}
                        </select>
                        <span class="am-form-caret"></span>
                    </div>

                </div>
            </div>
            <hr style="border:2px solid #dddddd;">
            <div class="am-g" style=" overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin-top: 10px;">
                <div class="am-u-sm-4">
                    订单留言：
                </div>
                <div class="am-u-sm-8">
                    <div class="am-form-group">
                        <label for="doc-ta-1"></label>
                        <textarea class="" rows="5" id="doc-ta-1" name="order_message" style="margin-top: 10px;margin-left: 5px;"></textarea>
                    </div>
                </div>
            </div>
            <div class="am-g" style=" overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin-top: 10px;">
                <div class="am-u-sm-9">
                    共{$cartList.total_num}件商品
                </div>
            </div>

            {foreach $skuIdsWeight as $key=>$value}
            <input type="hidden" name="skuids_weight[{$key}]" value="{$value}"/>
            {/foreach}
            <div class="am-g" style="text-align:left;margin-left: 20px;padding: 0;">
                商品总金额：<br>
                ¥<span id="totalPrice">{$cartList.total_price}</span><br>
                运费：<br>
                ¥<span id="freight">0</span><br>
                优惠劵抵扣:<br>
                -¥<span id="coupon">0</span><br>
                应付金额：<br>
                ¥<span id="ordertotal"></span><br>
            </div>
        </div>
        <button type="button" class="am-btn am-btn-primary" onclick="submitorder()">提交订单</button>
    </form>
</div>
<div style="height: 43px"></div>
{/block}
{block name="script"}
<script src="/public/plugins/template/template.js"></script>
<script src="/public/plugins/jsAddress/jsAddress.js"></script>
<script src="/public/plugins/json2.js"></script>
<script id="AddressListTpl" type="text/html">
    {{each list as value index}}
    <div class="am-g"
         style="text-align: left;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin-top: 10px;">
        <div class="am-u-sm-12">
            <div class="am-radio">
                <label>
                    <input type="radio" name="address_id" value="{{ value.address_id }}"
                           {{ if value.is_default==1}} checked {{/if }}>
                    收货人： {{ value.consignee }}
                </label>
            </div>

            <div class="am-radio">
                <label>
                    收货地址：{{ value.address_text }} {{ value.address }}{{ value.tel_phone }}
                </label>
            </div>
        </div>
        <a href="javascript:;" onclick="editAddress(this);" data-info="{{ value.json }}">编辑</a> <br/>
    </div>
    <hr style="border:2px solid #dddddd;">
    {{ /each }}
</script>
<script id="AddressFormTpl" type="text/html">
    <div style="padding:10px;height: 460px;width:254px;">
        <form id="addressForm">
            {{ if info.address_id>0 }}
            <input type="hidden" name="address_id" class="edit-address-id" value="{{ info.address_id }}" style="margin-left: 30px;"/>
            {{ /if }}
            <input type="hidden" name="is_default" value="{{ info.is_default }}" style="margin-left: 30px;"/>
            <div>
                <label>收货人</label>
                <input name="consignee" type="text" class="form-control" value="{{ info.consignee }}"
                       placeholder="收货人姓名" style="margin-left: 30px;">
            </div>
            <div>
                <label>联系电话</label>
                <input name="tel_phone" type="text" class="form-control" value="{{ info.tel_phone }}"
                       placeholder="收货人联系方式" style="margin-left: 16px;">
            </div>
            <div>
                <label>邮编</label>
                <input name="zip_code" type="text"  style="margin-left: 43px;" class="form-control" value="{{ info.zip_code }}" placeholder="收货邮编">
            </div>
            <div>
                <label>所在区域</label>
                <div class="area_name">
                    <select id="prov_id" name="prov_id" class="form-control"></select>
                    <select id="city_id" name="city_id" class="form-control"></select>
                    <select id="dist_id" name="dist_id" class="form-control"></select>
                </div>
            </div>
            <div>
                <label>详细地址</label>
                <input name="address" class="form-control" style="margin-left: 12px;margin-top: 5px;" value="{{ info.address }}" type="text" placeholder="请输入详细地址">
            </div>
            <div class="pure-controls" style="text-align: center;margin-top: 5px;">
                <button type="button" class="btn" onclick="saveAddress()">
                    保存收货人信息
                </button>
                <span id="validError"></span>
            </div>
        </form>
    </div>
</script>
<script>
    $(function () {
        getFreight();
        getAddressList();
    });

    //添加收货地址
    function addAddress() {
        var html = template('AddressFormTpl', {info: {is_default: 1}});
        layer.open({
            type: 1,
            title: '添加收货地址',
            area: ['800px', '500px'], //宽高
            content: html,
            success: function (layero, index) {
                addressInit('prov_id', 'city_id', 'dist_id');
            }
        });
    }

    function editAddress(obj) {
        var info = $(obj).data('info');
        var html = template('AddressFormTpl', {info: info});
        layer.open({
            type: 1,
            title: '添加收货地址',
            area: ['800px', '500px'], //宽高
            content: html,
            success: function (layero, index) {
                addressInit('prov_id', 'city_id', 'dist_id', info.prov_id, info.city_id, info.dist_id);
            }
        });
    }

    //保存收货地址
    function saveAddress() {
        var params = $('#addressForm').serialize();
        var addressId = parseInt($('.edit-address-id').val());
        if (addressId > 0) {
            var url = "{:url('home/User/addressEdit')}";
        } else {
            var url = "{:url('home/User/addressAdd')}";
        }
        $.post(url, params, function (res) {
            if (res.code == 1) {
                layer.closeAll('page');
                getAddressList();
            } else {
                $('#validError').text(res.msg);
            }
        });
    }

    //收货地址列表
    function getAddressList() {
        $.post("{:url('home/User/addressList')}", function (data) {
            var html = template('AddressListTpl', {list: data});
            $('#ajaxAddressList').html(html);
        });
    }

    //获取计算后得运费
    function getFreight() {
        $.post("{:url('home/Cart/getDeliveryprice')}", $('#orderForm').serialize(), function (freight) {
            $('#freight').text(freight);
            gettotal();
        });
    }
    //计算总价
    function gettotal() {
        var a1 = $('#totalPrice').text();
        var a2 = $('#freight').text();
        var a3 = $('#coupon').text();
        var total = parseFloat(a1) + parseFloat(a2) - parseFloat(a3);
        console.log(total);
        $('#ordertotal').empty().text(total);
    }
    //提交订单
    function submitorder() {
        var index=layer.open({type: 2,shadeClose:false});
        $.post("{:url('submitOrder')}", $('#orderForm').serialize(), function (data) {
            layer.closeAll(index);
            if (data.code == 1) {
                location.href = data.url;
            } else {
                layer.msg(data.msg);
            }
        })
    }
</script>
{/block}
